/**
* Created by yyr on 2018/1/10
*已设立基金》新建
*/
<template>
    <div>
        <div class="right__detail ca-p-t-50">
            <div class="ca-box ca-p-20">
                <el-row>
                    <el-col :span="24" class="ca-align-right">
                        <div class="ca-head-fixed">
                            <el-button type="primary" @click="fundAdd()">保存</el-button>
                            <el-button  @click="exit()">退出</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-form label-width="170px" :rules="rules" ref="ruleForm" :model="fundData.fund">
                   <el-row>
                       <el-col :span="7">
                           <el-form-item label="基金全称" labelWidth="120px" prop="fundFullname">
                               <el-input  placeholder="请输入内容" v-model="fundData.fund.fundFullname" :maxlength="100"></el-input>
                           </el-form-item>
                           <el-form-item label="基金类型"  labelWidth="120px">
                               <el-select v-model="fundData.fund.fundType" placeholder="请选择" style="width: 100%">
                                   <el-option
                                       v-for="item in initView.fundType"
                                       :label="item.name"
                                       :key="item.id"
                                       :value="item.id">
                                   </el-option>
                               </el-select>
                           </el-form-item>
                           <el-form-item label="投资期(年)"  labelWidth="120px" prop="investmentPeriod">
                               <el-input type="number"  placeholder="请输入内容" v-model="fundData.fund.investmentPeriod"></el-input>
                           </el-form-item>
                       </el-col>
                       <el-col :span="7" :offset="1">
                           <el-form-item label="基金简称"  labelWidth="120px" prop="fundName">
                               <el-input  placeholder="请输入内容" v-model="fundData.fund.fundName" :maxlength="100"></el-input>
                           </el-form-item>
                           <el-form-item label="基金规模(万元)" labelWidth="120px" prop="fundScale">
                               <el-input  placeholder="请输入内容" v-model="fundData.fund.fundScale"></el-input>
                           </el-form-item>
                           <el-form-item label="退出期(年)"  labelWidth="120px" prop="exitPeriod">
                               <el-input type="number"  placeholder="请输入内容" v-model="fundData.fund.exitPeriod"></el-input>
                           </el-form-item>
                       </el-col>
                       <el-col :span="7" :offset="1">
                           <el-form-item label="成立时间" labelWidth="120px">
                               <el-date-picker v-model='fundData.fund.establishTime' type="date"  placeholder="选择日期" style="width: 100%;"></el-date-picker>
                           </el-form-item>
                           <el-form-item label="基金经理" labelWidth="120px">
                               <el-select v-model="fundUser"
                                          @change="changeFundUser"
                                          filterable placeholder="请选择"
                                          style="width:100%;">
                                   <el-option
                                       v-for="item in userOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                                   </el-option>
                               </el-select>
                           </el-form-item>
                           <el-form-item label="基金状态"  labelWidth="120px">
                               <el-select placeholder="请选择" style="width:100%" v-model="fundData.fund.fundState">
                                   <el-option
                                       v-for="item in initView.fundState"
                                       :label="item.name"
                                       :key="item.id"
                                       :value="item.id">
                                   </el-option>
                               </el-select>
                           </el-form-item>
                       </el-col>
                   </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="投资方向" labelWidth="120px">
                                <el-select v-model="industry"
                                           @change="changeIndustry"
                                           placeholder="请选择"
                                           style="width:100%">
                                    <el-option
                                        v-for="item in initView.industry"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                       <el-col :span="12" class="ca-m-t-8 ca-m-l-10">
                           <el-tag
                               v-for="item in fundData.industryList"
                               :key="item.id"
                               :closable="true"
                               :close-transition="false"
                               @close="closeIndustry(item)"
                               :type="item.type" class="ca-m-r-10">
                               {{item.industry | getNameById('industry')}}
                           </el-tag>
                       </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="基金管理团队"  labelWidth="120px">
                                <el-select v-model="userTeamItem"
                                           @change="changeUserTeam"
                                           placeholder="请选择"
                                           filterable
                                           style="width:100%">
                                    <el-option
                                        v-for="item in userOptions"
                                        :label="item.label"
                                        :key="item.value"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="ca-m-t-8 ca-m-l-10">
                            <el-tag
                                v-for="item in fundUserTeam"
                                :key="item.id"
                                :closable="true"
                                :close-transition="false"
                                @close="closeUserItem(item)"
                                :type="item.type" class="ca-m-r-10">
                                {{item.userName}}
                            </el-tag>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <div class="ca-p-22 ca-box ca-m-t-15">
                    <el-row>
                        <el-col :span="12" class="ca-title">
                            <h3>基本信息</h3>
                        </el-col>
                    </el-row>
                    <el-form label-width="200px" class="ca-m-t-20">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="管理类型">
                                    <el-select v-model="fundData.fundEst.manType" placeholder="请选择" style="width: 100%">
                                        <el-option
                                            v-for="item in initView.fundManType"
                                            :label="item.name"
                                            :key="item.id"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="管理形式">
                                    <el-select v-model="fundData.fundEst.fundForm" placeholder="请选择" style="width: 100%">
                                        <el-option
                                            v-for="item in initView.fundForm"
                                            :label="item.name"
                                            :key="item.id"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="管理公司">
                                    <el-input v-model="fundData.fundEst.company" placeholder="请输入内容" :maxlength="100"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="执行事务合伙人">
                                    <el-select v-model="partnerName"
                                               @change="changePartnerName"
                                               filterable placeholder="请选择" style="width:100%;">
                                        <el-option
                                            v-for="item in userOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="基金委派代表">
                                    <el-input v-model="fundData.fundEst.fundDelegate" placeholder="请输入内容" :maxlength="100"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="基金托管人">
                                    <el-input placeholder="请输入内容" v-model="fundData.fundEst.custodian" :maxlength="100"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="注册地">
                                    <el-input placeholder="请输入内容" v-model="fundData.fundEst.place" :maxlength="100"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="办公地">
                                    <el-input placeholder="请输入内容" v-model="fundData.fundEst.officeLand" :maxlength="100"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="统一信用代码">
                                    <el-input placeholder="请输入内容" v-model="fundData.fundEst.creditCode" :maxlength="300"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="投资决策委员会">
                                    <el-row>
                                        <el-select v-model="committeeName"
                                                   @change="changeCommitteeName"
                                                   filterable placeholder="请选择" style="width:100%;">
                                            <el-option
                                                v-for="item in userOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-row>
                                    <div>
                                        <el-tag
                                            v-for="item in fundData.committeeList"
                                            :key="item.id"
                                            :closable="true"
                                            :close-transition="false"
                                            @close="closeCommitteeItem(item)"
                                            :type="item.type" class="ca-m-r-10">
                                            {{item.committeeName}}
                                        </el-tag>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="信息披露">
                                    <el-input v-model="fundData.fundEst.disclosure" :maxlength="300" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="管理费">
                                    <el-input v-model="fundData.fundEst.proportion" placeholder="请输入内容" :maxlength="100"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="投资限制">
                                    <el-input v-model="fundData.fundEst.restrictions"  type="textarea" placeholder="请输入内容" :maxlength="3000"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="收益分配">
                                    <el-input v-model="fundData.fundEst.distribution" type="textarea" :maxlength="3000" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="其他">
                                    <el-input v-model="fundData.fundEst.other" type="textarea" :maxlength="3000" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div>
                <div class="ca-p-22 ca-box ca-m-t-15">
                    <el-row>
                        <el-col :span="12" class="ca-title">
                            <h3>基金账户信息</h3>
                        </el-col>
                    </el-row>
                    <table class="ca-table ca-m-t-15">
                        <tr>
                            <th width="16%" style="background:#ececec"></th>
                            <th width="28%">开户行名称</th>
                            <th width="28%">户名</th>
                            <th width="28%">账号</th>
                        </tr>
                        <tr v-for="(row,index) in fundData.accountList" :key="index">
                            <td style="background:#ececec">{{row.type | getNameById('account')}}</td>
                            <td><el-input :maxlength="40" v-model="row.nameOfBank"  placeholder="请输入内容"></el-input></td>
                            <td><el-input :maxlength="40" v-model="row.name"  placeholder="请输入内容"></el-input></td>
                            <td><el-input :maxlength="22" v-model="row.accountNumber"  placeholder="请输入内容"></el-input></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import {addRemind} from '__service/utils';
    export default {
        data() {
            var validateNumber = (rule, value, callback) => {
                var reg = /^\d{1,14}(\.\d{1,6})?$/;
                if ((value !== '') && (!reg.test(value))) {
                    callback(new Error('请输入正确范围的数字'));
                } else {
                    callback();
                }
            };
            return {
                initView: {
                    fundType: this.$store.state.user.dictionaryMap.fundType,//基金类型
                    industry: this.$store.state.user.dictionaryMap.industry, //投资方向
                    fundState: this.$store.state.user.dictionaryMap.foundation,// 设立状态
                    fundManType: this.$store.state.user.dictionaryMap.fundManType,//管理类型
                    fundForm: this.$store.state.user.dictionaryMap.fundForm,//管理形式
                    userEntityList: this.$store.state.user.department.userEntityList,//用户
                },
                fundData: {
                    accountList: [
                        {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 1},//基本户开户行
                        {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 2},//托管户开户行
                        {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 3},//监管户开户行
                        {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 4},//基金证券账户信息
                    ],
                    committeeList: [],
                    fund: {
                        establishTime: '2018-1-19',
                        exitPeriod: '',  //退出期
                        exitTime: '2018-1-19', //退出时间
                        fundCategory: '1',  //基金类别
                        fundFullname: '', // 基金全称
                        fundName: '', //基金简称
                        fundScale: '', //基金规模
                        fundState: '1', //设立状态
                        fundType: '01',  //基金类型
                        id: '',
                        investmentPeriod: '', //投资期
                        treeType: '1', //子基金
                    },
                    fundAnsatEstList: [   //投前基金
                        /*{
                            ansatId: '',
                            estId: '',
                            id: ''
                        }*/
                    ],
                    fundEst: {
                        backups: '1',  //是否备份
                        company: '', //管理公司
                        creditCode: '', //统一信用代码
                        disclosure: '',  //信息披露
                        distribution: '', //收益分配
                        exitMode: '', //退出方式
                        fundDelegate: '', //基金委派代表
                        fundForm: '1', //管理形式
                        fundId: '',
                        id: '',
                        manType: '1', //管理类型 fundManType
                        other: '', //其他
                        partnerId: '', //执行事务合伙人id
                        partnerName: '', //执行事务合伙人名称
                        place: '', //注册地
                        proportion: '', //管理费比例
                        restrictions: '', //投资限制
                        officeLand: '',//办公地
                        custodian: '',//基金托管人
                    },
                    fundUserList: [
                        {
                            fundId: '',
                            id: '',
                            userId: '',
                            userName: '',//用户名称
                            userType: '' //用户类型  1 经理 2 管理团队
                        }
                    ],
                    industryList: []
                },
                userOptions: [],
                fundUser: '',//基金经理
                fundUserTeam: [],//基金管理团队
                industry: '',//投资方向
                userTeamItem: '',//管理团队v-model
                partnerName: '',//执行事务合伙人name
                committeeName: '',//委员会的Name
                committeeNameList: [],//管理委员会数组
                rules: {
                    fundFullname: [
                        { required: true, message: '请输入基金全称', trigger: 'blur' },
                    ],
                    fundName: [
                        { required: true, message: '请输入基金简称', trigger: 'blur' },
                    ],
                    investmentPeriod: [
                        { required: true, message: '请输入投资期', trigger: 'blur' },
                    ],
                    exitPeriod: [
                        { required: true, message: '请输入退出期', trigger: 'blur' },
                    ],
                    fundScale: [
                        { required: false, validator: validateNumber, trigger: 'blur'}
                    ],
                },
            }
        },
        watch: {
        },
        props: {},
        mounted() {
            if (this.$route.params.establishId ) {
                apiHttp(api.ESTABLISH_CHANGE_INVESTING,{fundId: this.$route.params.establishId}).then(ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundData = ret.data;
                        this.fundData.accountList = [
                            {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 1},//基本户开户行
                            {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 2},//托管户开户行
                            {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 3},//监管户开户行
                            {accountNumber: '',fundId: '',id: '',name: '',nameOfBank: '',type: 4},//基金证券账户信息
                        ]
                        this.fundData.committeeList = [];
                        if (this.fundData.fundUserList.length > 0) {
                            for (let i of this.fundData.fundUserList) {
                                if (i.userType === '1') {
                                    this.fundUser = i.userName;
                                } else {
                                    this.fundUserTeam.push(i)
                                }
                            }
                        }
                        this.fundData.fund.fundState = '1';
                    }
                })
            }
            this.userOptions = this.initView.userEntityList.map(item => {
                return { value: item.id, label: item.userName };
            });
        },
        methods: {
            /*新增已设立基金*/
            fundAdd() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if ( this.fundUserTeam.length > 0 ) {
                            this.fundData.fundUserList = this.fundData.fundUserList.concat(this.fundUserTeam)
                        }
                        apiHttp(api.ADD_FUND,this.fundData).then(ret=>{
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success',
                                    center: true
                                });
                                this.addRedDot(ret.data.id);
                                this.$router.push({name: 'investing-funds-list'});
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            async addRedDot(id) {
                // 添加小红点
                await addRemind({
                    dataId: id, // 业务id
                    dataTab: 0, // tab页顺序 head 也为0 新建为'-1'
                    dataType: 5, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                });
                // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                this.$root.Dot.$emit('getDotList');
                // 添加小红点 end
            },
            exit() {
                /*退出新增页面*/
                this.$confirm('是否退出', '提示', {
                    cancelButtonText: '否',
                    confirmButtonText: '是',
                    type: 'warning',
                    showClose: false
                }).then(() => {
                    this.$router.push({name: 'investing-funds-list'});
                })
            },
            //添加投资方向tag
            changeIndustry(industryItem) {
                let flag = false;
                for (let i of this.fundData.industryList) {
                    if (i.industry === industryItem) {
                        flag = true;
                        return;
                    }
                }
                if (!flag) {  //true 才push
                    this.fundData.industryList.push({industry: industryItem,fundId: '',id: ''})
                }
             },
            //关闭投资方向tag
            closeIndustry(tag) {
                this.fundData.industryList.splice(this.fundData.industryList.indexOf(tag),1);
            },
            //关闭投资决策委员会
            closeCommitteeItem(tag) {
                this.fundData.committeeList.splice(this.fundData.committeeList.indexOf(tag),1);
            },
            //添加管理团队
            changeUserTeam(item) {
                let flag = false;
                for (let i of this.fundUserTeam) {
                    if (i.id === item) {
                        flag = true;
                        return;
                    }
                }
                if (!flag) {  //true 才push
                    for (let i of this.userOptions) {
                        if (item === i.value) {
                            this.fundUserTeam.push({userName: i.label,userType: 2,userId: i.value})
                        }
                    }
                }
            },
            //关闭管理团队
            closeUserItem(tag) {
                this.fundUserTeam.splice(this.fundUserTeam.indexOf(tag),1);
            },
            //基金经理change
            changeFundUser(val) {
                let userName = '';
                this.initView.userEntityList.map( item => {
                    if (item.id === val) {
                        userName = item.userName
                    }
                })
                this.fundData.fundUserList[0] = Object.assign({},{
                    fundId: '',
                    id: '',
                    userId: val,
                    userName: userName,
                    userType: 1
                })
            },
            //执行事务合伙人change
            changePartnerName(val) {
                let name = '';
                this.initView.userEntityList.map( item => {
                    if (item.id === val) {
                        name = item.userName
                    }
                })
                this.fundData.fundEst.partnerName = name;
                this.fundData.fundEst.partnerId = val;
            },
            //投资决策委员会change
            changeCommitteeName(val) {
                let flag = false;
                for (let i of this.committeeNameList) {
                    if (i.id === val) {
                        flag = true;
                        return;
                    }
                }
                if (!flag) {
                    for (let i of this.userOptions) {
                        if (val === i.value) {
                            this.fundData.committeeList.push({committeeId: i.value, committeeName: i.label, fundId: '', id: ''})
                        }
                    }
                }
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    table td{
        padding: 5px 5px;
        box-sizing: border-box;
    }
    .ca-m-t-8{
        magin-top: 8px;
    }
</style>
